<script setup lang="ts">
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
const router=useRouter()
function backClick(){
    router.go(-1)
}
const active = ref(0);

</script>
<template>

    <main class="box">
        <header class="header">
      <slot  name="left">
      <div class="back">
        <van-icon color="#d6d6d6" size="20" @click="backClick" name="arrow-left" />
        <span @click="backClick">返回</span>
      </div>
 
      </slot>
      <span>我的钱包</span>
      <slot name="right"></slot>
  </header>
    <div class="content"> 
    <div class="background">
    <div class="total">总余额</div>
    <div class="geting">提现</div>
    <div class="money">0.00</div>
    <div class="moneybox">
    <div class="usemoney">
    <div class="usenum">0.00</div>
    <div class="usetitle">可提现金额</div>
    </div>
    <div class="usemoney">
    <div class="usenum">0.00</div>
    <div class="usetitle">冻结金额</div>
    </div>
    <div class="usemoney1">
    <div class="usenum">0.00</div>
    <div class="usetitle">累计提现</div>
    </div>
    </div>
    </div>
    <van-tabs line-width="120px"  v-model:active="active"  swipeable>
  <van-tab title="收入">
  <div class="nodate">
  <van-image class="img" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84%E9%92%B1%E5%8C%85/u2860.svg"></van-image>
  <div class="nodatetext">暂无数据</div>
  </div></van-tab>
  <van-tab title="支出">
  <div class="nodate">
  <van-image class="img" src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84%E9%92%B1%E5%8C%85/u2860.svg"></van-image>
  <div class="nodatetext">暂无数据</div>
  </div></van-tab>
</van-tabs>
    </div>
    </main>
</template>

<style lang="scss" scoped>
.header{
    color: black;
    background-color: white;
   .back{
    position: absolute;
    left: 0;
    top: 0;
    span{
        color: blue;
    }
   }
}
.content{
    background-color: #f4f6f9;
    .background{
        width: 94%;
        height: 2.2rem;
        background-image: url(https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84%E9%92%B1%E5%8C%85/u2847.png);
        background-size: 100% 100%;
        margin: 10px auto;
        position: relative;
        .total{
            font-size: 26px;
            color: white;
            position: absolute;
            top: 20px;
            left:158px
        }
        .geting{
            font-size: 18px;
            color: white;
            position: absolute;
            right: 20px;
            top:25px ;
        }
        .money{
            font-size: 60px;
            color: #cccc00;
            position: absolute;
            top: 60px;
            left:138px
        }
        .moneybox{
            width: 260px;
            height: 60px;

            position: absolute;
            bottom: 20px;
            left:64px;
            display: flex;
            .usemoney{
                width: 33%;
                height: 60px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                border-right: 5px solid white;
            .usenum{
                font-size: 19px;
                color: #cccc00;
            }
            .usetitle{
                font-size: 14px;
                font-weight: 200;
                color: white;
            }
            }
            .usemoney1{
                width: 33%;
                height: 60px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;

            .usenum{
                font-size: 19px;
                color: #cccc00;
            }
            .usetitle{
                font-size: 14px;
                font-weight: 200;
                color: white;
            }
            }

        }
    }
    .nodate{
        width: 100%;
        height: 374px;
        position: relative;
        .img{
            position: absolute;
            left: 116px;
            top: 80px;
        }
        .nodatetext{
            position: absolute;
            font-size: 16px;
            left: 170px;
            top: 270px;
        }
    }
}

</style>
    